@charset "utf-8";
/*********************
* chat center
* Author: Feil.Wang
* Date: 2013.06 
*********************/

html,body{ height:100%; width:100%;  font-family:Helvetica, Arial, sans-serif}
.bg{ background-color:#3a3f45; display:table; min-height:750px; *overflow:hidden;  *position:relative; _height:expression((document.documentElement.clientHeight||document.clientHeight)<750?"750":"");}
.wrap{ display:table-cell; vertical-align:middle;   *position:absolute;  *top:50%; }
.container{ position:relative; width:1020px; height:750px; margin:0 auto; /*box-shadow:0 0 15px #000;*/  *position:relative;  *top:-50%;}
.main{ height:750px; position:relative;}


.dialog-title, 
.dialog-title .close,
.admin-icon,
.clear-text-btn,
.arrow-icon,
.camera-icon,
.mic-icon,
.h-camera-icon,
.h-mic-icon{ background:url(../images/sprite-vchat.png) no-repeat;_background:url(../images/sprite-vchat-ie6.png) no-repeat;}

.rec-btn,.rec-stop-btn,.vchat-btn,.send-btn{ background:url(../images/vchat-btn-en.png) no-repeat; _background:url(../images/vchat-btn-en-ie6.png) no-repeat;}


.dialog-container{ position:absolute; left:50%; top:50%; z-index:999; display:none;}
.dialog-cover{ line-height:0; position:absolute; left:0; top:0; z-index:1;}
.dialog-cover .d-l-t{ width:15px; height:15px; background:url(../images/d-l-t.png) no-repeat;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../static/images/d-l-t.png', sizingMethod='crop');}
.dialog-cover .d-m-t{ height:15px;background:url(../images/d-m-t.png) repeat-x;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../static/images/d-m-t.png', sizingMethod='crop');}
.dialog-cover .d-r-t{ width:15px; height:15px;background:url(../images/d-r-t.png) no-repeat;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../static/images/d-r-t.png', sizingMethod='crop');}
.dialog-cover .d-l-m{ width:15px; background:url(../images/d-l-m.png) repeat-y;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../static/images/d-l-m.png', sizingMethod='crop');}
.dialog-cover .d-m-m{ background-color:#fff; opacity:0.4;}
.dialog-cover .d-r-m{ width:15px; background:url(../images/d-r-m.png) repeat-y;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../static/images/d-r-m.png', sizingMethod='crop');}
.dialog-cover .d-l-b{ width:15px; height:15px;background:url(../images/d-l-b.png) no-repeat;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../static/images/d-l-b.png', sizingMethod='crop');}
.dialog-cover .d-m-b{ height:15px;background:url(../images/d-m-b.png) repeat-x;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../static/images/d-m-b.png', sizingMethod='crop');}
.dialog-cover .d-r-b{ width:15px; height:15px;background:url(../images/d-r-b.png) no-repeat;_background-image:none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../static/images/d-r-b.png', sizingMethod='crop');}


.dialog-content{ position:relative; width:100%; height:100%; border-radius:4px; z-index:2; box-shadow:0 0 5px #666}
.dialog-title{ border-top-left-radius:4px;border-top-right-radius:4px; position:relative; height:33px; line-height:33px; background-repeat:repeat-x;}
.dialog-title h3{ float:left; font-size:16px; padding-left:10px;  text-shadow:1px 1px 1px #e2e2e2;}
.dialog-title .close{ float:right; outline:none; background-position:0 -33px; width:17px; height:17px; text-indent:-999px; overflow:hidden; margin:7px 8px 0 0;transform:rotate(0deg);-moz-transform:rotate(0deg); -webkit-transform:rotate(0deg);transition:transform 0.3s;-moz-transition:transform 0.3s;-webkit-transition:-webkit-transform 0.3s;}
.dialog-title .close:hover{  background-position:-17px -33px;transform:rotate(180deg);-moz-transform:rotate(180deg); -webkit-transform:rotate(180deg);}

.vchat-container{ width:990px; height:720px; padding:15px; }
.vchat-container .dialog-cover{width:1020px; height:750px;}
.vchat-container .dialog-cover .d-m-m{ height:720px;}
.vchat-wrap{ position:relative; width:990px; height:687px; border-bottom-left-radius:4px; border-bottom-right-radius:4px; background:url(../images/vchat-bg.jpg) no-repeat;}

.vchat-disp-wrap{ position:absolute; left:10px; top:10px; width:711px; height:278px; background:url(../images/vchat-top-bg.jpg); opacity:0; filter:alpha(opacity=0);}
.rec-btn,.rec-stop-btn{ float:right; display:block; width:59px; height:32px; line-height:32px; background-position:0 -384px; color:#fff;  margin:10px 5px 0 0;}
.rec-btn:hover{background-position:0 -416px; color:#fff;}
.rec-btn:active{background-position:0 -448px; color:#fff;}
.rec-stop-btn{ background-position:-60px -384px;}
.rec-stop-btn:hover{ background-position:-60px -416px;}
.rec-stop-btn:active{ background-position:-60px -448px;}
.count-time { width:58px; text-align:center; color:#fff;float:right; margin:5px 5px 0 0; clear: both;}
.vchat-disp-wrap ul{}
.v-disp-item{ opacity:0;filter:alpha(opacity=0); position:absolute; top:12px; width:264px; height:234px; border:1px solid #262b2e; background:url(../images/vchat-win-bg.png); border-radius:4px; box-shadow:0 1px 2px #333; padding:8px;}
.v-disp-item-right{}
.vchat-window{ width:264px; height:198px; background-color:#000; background:url(../images/video-default-bg.jpg);}
.vchat-window img{ vertical-align:bottom;}
.user-name{ padding-top:12px; color:#fff; text-align:center;}
.admin-icon{ display:inline-block; width:20px; height:20px; background-position:0 -50px; vertical-align:middle; margin:0 3px 3px 0;}

.text-chat-wrap{ padding:18px; width:675px; position:absolute; left:10px; bottom:10px;}
.text-chat-main{ width:675px; background-color:#fff; border-top-left-radius:3px; border-top-right-radius:3px; overflow:hidden;}
.chat-msg-list li{padding:15px; *zoom:1; border-bottom:1px solid #ececec;}
.chat-msg-list li:after{content:''; display:block; height:0; clear:both; visibility: hidden; }
.chat-msg-list li.odd{ background-color:#fbfbfb;}
.u-avatar{ float:left; position:relative;}
.e-vcard{ display:none; width:85px; height:30px; position:absolute; top:23px; left:0; background:url(../images/u-tips-en.png);}
.chat-msg-list dl{ float:left; padding-left:10px; width: 580px; word-break:break-all}
.other-name{ color:#39F;}
.role-admin dd{ }
.role-myself dd{ }
.chat-msg-list dt{ font-weight:bold;}
.u-avatar img{ width:36px; height:36px; border:1px solid #ccc; border-radius:3px; vertical-align:bottom;}
.text-chat-btm{ height:80px; padding:12px 12px 12px; border-top:1px solid #bfbfbf; background-color:#f5f5f5; border-bottom-left-radius:3px; border-bottom-right-radius:3px; box-shadow:0 1px 0 #fdfdfd; position:relative;}

.text-chat-l{ float:left; width:527px;  position:relative;}
.text-controls{ height:30px;}
.text-style-item{ float:left; padding:1px 8px; border-right:1px solid #d4d4d4;}
.text-style-item .ckbx{  vertical-align:middle; margin:1px 0 0 0}
.underline-icon,.bold-icon,.italic-icon,.t-arrow{ display:inline-block; vertical-align:middle;width:16px; height:16px; background:url(../images/text-style.png);}
.bold-icon{ background-position:0 -16px;}
.italic-icon{ background-position:0 -32px;}
.text-color-wrap{ float:left; margin-left:8px; padding:2px; background-color:#fff; border:1px solid #d4d4d4;  position:relative;cursor:pointer;}
.txt-cur-color{ float:left; width:25px; height:16px;}
.t-arrow{ float:left; width:10px; height:10px; background-position:0 -48px; margin-top:3px; font-size:0;}
.text-color-container{ display:none; width:88px; position:absolute; left:-1px; bottom:20px; padding:8px; border:1px solid #d4d4d4; background-color:#fff; cursor:default;}
.text-color-list li{ float:left;}
.text-color-list li a{ float:left; width:16px; height:16px; margin:2px; _display:inline; border:1px solid #ddd;}
.text-color-list li a:hover{ border:1px solid #F90;}

.text-input{ width:515px; height:40px; border:1px solid #c7c7c7; resize:none; padding:5px; border-radius:3px;box-shadow:0 1px 3px #CCCCCC inset; overflow:auto;}
.text-input-focus{border:1px solid #32b3fc;}
.redFlash{ background-color:#FFD4D4; border:1px solid #fdabab}
.clear-text-btn{ display:none; width:20px; height:20px; background-position:0 -70px; position:absolute; top:45px; right:22px;}
.text-chat-r{ float:left; margin-left:12px;}
.select-user{ position:relative; width:110px; height:30px; border:1px solid #c7c7c7; background-color:#fff; border-radius:3px; box-shadow:0 1px 3px #CCCCCC inset; cursor:pointer;}
.cur-user{ float:left; width:75px; line-height:30px; padding-left:8px; overflow:hidden; text-overflow:ellipsis;}
.arrow-icon{ display:block; width:9px; height:9px; float:right; margin:10px 10px 0 0; background-position:-40px -35px; font-size:0; _display:inline;}
.user-list-wrap{ display:none; width:110px; position:absolute; bottom:27px; left:-1px; z-index:9999; border:1px solid #c7c7c7; background-color:#fff;border-bottom:none;border-top-left-radius:3px; border-top-right-radius:3px;}
.user-list li{ position:relative;}
.user-list li a{ display:block; padding:3px 8px; height:18px; line-height:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; position:relative;}
.user-list li a:hover{ background-color:#e2e2e2;}
.send-btn{ width:79px; height:36px; float:left; margin:13px 0 0 13px;; background-position:right -384px;}
.send-btn:hover{background-position:right -420px;}
.send-btn:active{background-position:right -456px;}

/*right top*/
.vchat-info-wrap{ width:248px; height:266px; position:absolute; right:10px; top:10px;}
.status-tips{ color:#fff; text-align:right; padding:3px 5px;}
.v-logo{ height:90px; text-align:center; padding:20px 0 0;}
.v-logo img{ height:90px;}
.v-info{ font-size:16px; text-align:center;color:#fff; padding:8px 0 5px; font-weight:bold; white-space:nowrap; overflow:hidden;}
.request-area{}
.vchat-btn{ width:129px; height:32px; display:block; margin:10px auto;}
.open-video{ background-position:0 0;}
.open-video:hover{background-position:0 -32px;}
.open-video:active{background-position:0 -64px;}
.close-video{background-position:0 -192px;}
.close-video:hover{background-position:0 -224px;}
.close-video:active{background-position:0 -256px;}
.request-video{background-position:0 -96px;}
.request-video:hover{background-position:0 -128px;}
.request-video:active{background-position:0 -160px;}
.cancel-video{background-position:0 -288px;}
.cancel-video:hover{background-position:0 -320px;}
.cancel-video:active{background-position:0 -352px;}
.open-voice{background-position:-129px 0;}
.open-voice:hover{background-position:-129px -32px;}
.open-voice:active{background-position:-129px -64px;}
.close-voice{background-position:-129px -192px;}
.close-voice:hover{background-position:-129px -224px;}
.close-voice:active{background-position:-129px -256px;}
.request-voice{background-position:-129px -96px;}
.request-voice:hover{background-position:-129px -128px;}
.request-voice:active{background-position:-129px -160px;}
.cancel-voice{background-position:-129px -288px;}
.cancel-voice{background-position:-129px -320px;}
.cancel-voice{background-position:-129px -352px;}
.waiting{background-position:0px -482px; cursor:default;}

/*right bottom*/
.participant-wrap{ width:248px; height:390px; position:absolute; right:10px; bottom:10px; border-bottom-left-radius:5px;}
.participant-wrap h3{ height:25px; _height:26px;color:#fff; padding:5px 0 0 10px; font-weight:normal;}
.participant-wrap h3 .num{ height:18px; line-height:18px; margin-left:5px; padding:1px 5px; background-color:#8d8f90; font-size:12px; border-radius:3px; box-shadow:0 0 3px #333 inset;}
.participant-list-area{ height:360px;}
.participant-list li{ height:36px; line-height:36px; padding:0 30px; border-bottom:1px solid #2f3843; background:#465256; position:relative; overflow:hidden; text-overflow:ellipsis;}
.participant-list li:hover{ background-color:#32586e;}
.participant-list li .name{ color:#fff;}
.participant-list li .role-admin{ color:#ff4444;}
.participant-list li .admin-icon{ position:absolute; left:5px; top:7px; margin:0;}

.camera-icon,
.mic-icon,
.h-camera-icon,
.h-mic-icon{ width:20px; height:20px; display:block; position:absolute; right:5px; top:8px; cursor:pointer;}
.camera-icon{ background-position:-20px -50px;}
.mic-icon{background-position:-40px -50px;}
.h-camera-icon{background-position:-60px -50px;}
.h-mic-icon{background-position:-80px -50px;}